<template>
  <section class="purchase">
    <header class="header">
      <time class="time">{{purchase.releaseTime | timeFlier('yyyy-MM-DD')}}</time>
      <span class="tag">采购</span>
      <span>{{ purchase.productTypeLastName || '&nbsp;'}}</span>
    </header>

    <div class="content">
      <h3 class="company-name text-overflow">{{ purchase.companyName}}</h3>
      <ul>
        <li class="text-overflow" :title=" purchase.mineralsStandard">
          品位(%): <span class="value">{{ purchase.mineralsStandard}}</span>
        </li>
        <li class="text-overflow" :title="purchase.productFrom">
          产&emsp;地: <span class="value">{{ purchase.productFrom }}</span>
        </li>
        <li class="text-overflow" :title="purchase.productNum">
          数&emsp;量: <span class="value">{{ purchase.productNum }}</span>
        </li>
        <li class="text-overflow" :title="purchase.tradeAddr">
          交货地: <span class="value">{{ purchase.tradeAddr }}</span>
        </li>
        <li class="text-overflow">
          截止日期: <span class="value text-primay">{{ purchase.validTimeEnd | timeFlier('yyyy-MM-DD') }}</span>
        </li>

        <li class="text-overflow">
          备&emsp;注: <span class="value" :title="purchase.memo">{{ purchase.memo }}</span>
        </li>

        <li class="text-overflow">
          联系方式: <span v-if="!user.userId"><a class="text-primay" :href="centerAddress"
                                             @click.prevent="showLogin()">登录</a>后可查看联系方式</span>
          <span v-if="user.userId"><span>{{ purchase.commPerson}}</span> <span class="user-phone">{{ purchase.tel
            }}</span></span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
  import address from '~/config/index'

  export default {
    props: {
      purchase: {
        type: Object,
        'default' () {
          return {}
        }
      }
    },

    data () {
      return {
        centerAddress: address.CENTER_ADDRESS
      }
    },
    methods: {
      // 显示登录
      showLogin (url) {
        if (url != undefined) {
          this.$store.commit('SET_OPEN', {opend: true, openurl: url})
        } else {
          this.$store.commit('SET_OPEN', {opend: true})
        }
      },

    },

    computed: {
      user () {
        return this.$store.getters.getUser
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .purchase {
    width: 298px;
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #dedede;
    position: relative;

    .tag {
      margin-right: 15px;
    }

    &:last-child {
      border-right-color: transparent;

      &:hover {
        border-color: #e8af68;
      }
    }
    &:hover {
      border-color: #e8af68;
      z-index: 3;
    }

    .header {
      padding: 18px;
      background-color: #f8f8f8;
      color: #3e3e3e;
      border-bottom: 1px solid #dedede;
      .time {
        float: right;
        color: #9e9e9e;
      }
      .label {
        margin-right: 15px;
      }

    }

    .content {
      padding: 14px 20px 18px;
      background-color: #fff;
      color: #9e9e9e;

      .company-name {
        color: #3e3e3e;
        font-size: 14px;
        font-weight: normal;
        padding-bottom: 5px;
      }

      li {
        line-height: 34px;
      }

      .value {
        color: #3e3e3e;
        padding-left: 5px;
      }
    }
    .user-phone {
      padding-left: 10px;
    }

    .footer {
      margin-top: 6px;
    }
  }
</style>
